<template>
  <!-- 常规登入 -->
  <div class="common-loginForm">
    <el-form-item label="用户名" prop="username">
      <el-input
        class="ps"
        type="text"
        v-model="loginForm.username"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
        type="password"
        v-model="loginForm.password"
        autocomplete="off"
      ></el-input>
    </el-form-item>
    <el-form-item label="验证码" prop="captcha">
      <!-- 验证码是左右两部分拼接而成 -->
      <el-input
        maxlength="5"
        v-model="loginForm.captcha"
        class="captcha"
        ref="captcha"
        @keydown.native.enter="submitForm('loginForm')"
        type="text"
      ></el-input>
      <span class="captcha-svg" v-loading="loading">
        <i v-html="captcha" @click="getCaptcha" class="i"></i>
      </span>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm('loginForm')" class="button">
        提交
      </el-button>
      <!-- <el-button @click="resetForm('loginForm')">重置</el-button> -->
    </el-form-item>
    <el-form-item>
      <div class="sms">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-iphone"></use>
        </svg>
        <a
          href="javascript:;"
          @click="$emit('changeMessType')"
          style="color: blue; font-size: 16px"
        >
          切换短信登入
        </a>
      </div>
    </el-form-item>
  </div>
</template>

<script>
import * as api from "@/api/users";
export default {
  created() {
    this.getCaptcha();
  },
  mounted() {
    api.getCaptcha().then((res) => console.log(res));
  },
  data() {
    return {
      //控制短信登入和常规登入切换的数据
      isMessLogin: true,
      captcha: "", //验证码
      loginForm: {
        username: "",
        password: "",
        captcha: ""
      },
      loading: false
    };
  },
  watch: {
    loginForm: {
      handler(newVal) {
        // console.log(newVal);
        //自定义函数子传父
        this.$emit("zdLoginFn", newVal);
      },
      deep: true
    }
  },
  methods: {
    submitForm(formName) {
      // console.log(formName);
      this.$emit("submit");
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // }
    //封装一个获取验证码的方法
    getCaptcha() {
      //打开加载动画
      this.loading = true;
      api.getCaptcha().then((res) => {
        this.captcha = res.data.img;
        //关闭加载动画
        this.loading = false;
      });
    }
  }
};
</script>

<style scoped lang="less">
.button {
  width: 300px;
}
.sms {
  margin-left: 80px;
}
.captcha {
  width: 150px;
  vertical-align: top;
}
/deep/.el-input__inner {
  border-radius: 5px 0 0 5px;
}
.common-loginForm {
  position: absolute;
  .i {
    // background-color: white;
    font-size: 16px;
    position: relative;
    top: -5px;
    border: 0px solid rgb(255, 255, 255);
  }
  /deep/.el-loading-mask {
    position: relative;
    top: -57px;
    left: 150px;
    width: 150px;
    height: 40px;
    background-color: white;
    vertical-align: top;
    border-radius: 0;
    border: 0px solid white;
  }
}
</style>
